<template>
    <view class="content">
        <!--抽奖券信息-->
        <view class="coupon-info">
            <view class="title">当前已拥有抽奖券</view>
			<view class="number"><text class="text">{{ stepUserInfo.voucherCount || 0 }}</text><text class="symbol">张</text></view>
			<view class="status"><text class="text">可用步数：{{ stepUserInfo.stepNum || 0 }}步</text><text class="text">我的金币：{{ parseInt(stepUserInfo.balance) }}</text></view>
			
			<view class="record" @tap="toRecord()">参与记录</view>
        </view>

        <!--抽奖券兑换-->
        <view class="coupon-change">
			<view class="title">请选择兑换数量</view>
			<view class="coupon-list">
				<view class="coupon-item" v-for="item in couponList" :key="item.number" :class="[{ active : item.checked }]" @tap="changeCoupon(item)">
					<view class="number"><text class="text">{{ item.number }}</text><text class="symbol">张</text></view>
					<view class="text" v-if="changeType === 2">{{ hdyxRiskSetting.needStepNum * item.number}}步数</view>
					<view class="text" v-if="changeType === 1">{{ hdyxRiskSetting.needGoldAmount * item.number}}金币数</view>
				</view>
			</view>
			<view class="radio-group">
				<view class="radio-item" @tap="changeType = 2">
					<view class="radio" :class="[{ active : changeType === 2 }]"><view class="inner"></view></view>
					<text class="text">步数兑换</text>
				</view>
				<view class="radio-item" @tap="changeType = 1">
					<view class="radio" :class="[{ active : changeType === 1 }]"><view class="inner"></view></view>
					<text class="text">金币兑换</text>
				</view>
			</view>
			<view class="change-btn" @tap="submitChange()">兑换</view>
		</view>

		<!--抽奖券使用说明-->
		<view class="rules">
			<view class="rule-item">
				<text class="text">1.如何获取抽奖券？</text>
				<text class="text">答：您的每日运动数、金币可以直接兑换抽奖券，您还可以通过分享也有机会获得抽奖券。</text>
			</view>
			<view class="rule-item">
				<text class="text">2.兑换抽奖券有什么限制？</text>
				<text class="text">答：步数兑换抽奖券的比例是1：{{ hdyxRiskSetting.needStepNum }}，金币兑换抽奖券的比例是1：{{ hdyxRiskSetting.needGoldAmount }}。步数每日最高兑换5张抽奖券，金币兑换没有限制。</text>
			</view>
		</view>
    </view>
</template>

<script>
    import { mapGetters } from 'vuex';
    export default {
        name: "coupon",
		data() {
			return {
				changeType: 2,
				couponList: [
					{
						number: 1,
						checked: true
					},
					{
						number: 3,
						checked: false
					},
					{
						number: 5,
						checked: false
					}
				]
			}
		},
        computed: {
            ...mapGetters(['stepUserInfo', 'hdyxRiskSetting'])
        },
		onLoad() {
			uni.reportAnalytics('enter_choujiang_choujianquan', {
				enter_choujiang_choujianquan: 1
			});
		},
		methods: {
			changeCoupon(item) {
				if (item.checked) {
					return false;
				}
				this.couponList.forEach(item => {
					item.checked = false;
				})
				item.checked = true;
			},
			radioChange(e) {
				this.changeType = e.detail.value;
			},
			submitChange() {
				if (this.changeType === 2) {
					this.couponList.forEach(item => {
						if (item.checked) {
							if (Number(this.stepUserInfo.stepNum) < (this.hdyxRiskSetting.needStepNum * item.number)) {
								uni.showToast({
									title: '步数不足',
									icon: 'none'
								});
								return false;
							}
							uni.showLoading({
								title: '加载中...',
								icon: 'none'
							})
							this.$service.activity.voucher.increase({
								type: 2,
								num: item.number
							}).then(res => {
								uni.showToast({
									title: '兑换成功',
									icon: 'none'
								})
								this.$store.dispatch('getStepUserInfo');
								uni.hideLoading();

								uni.reportAnalytics('click_duihuan_cg', {
									click_duihuan_cg: 1
								});
							}).catch(err => {
								uni.hideLoading();
								uni.showToast({
									title: err.message,
									icon: 'none'
								});
							});
						}
					});
				} else {
					this.couponList.forEach(item => {
						if (item.checked) {
							if (Number(this.stepUserInfo.balance) < (this.hdyxRiskSetting.needGoldAmount * item.number)) {
								uni.showToast({
									title: '权益币不足',
									icon: 'none'
								});
								return false;
							}
							uni.showLoading({
								title: '加载中...',
								icon: 'none'
							});
							this.$service.activity.voucher.increase({
								type: 1,
								num: item.number
							}).then(res => {
								uni.showToast({
									title: '兑换成功',
									icon: 'none'
								});
								this.$store.dispatch('getStepUserInfo');
								uni.hideLoading();

								uni.reportAnalytics('click_duihuan_cg', {
									click_duihuan_cg: 1
								});
							}).catch(err => {
								uni.hideLoading();
								uni.showToast({
									title: err.message,
									icon: 'none'
								});
							});
						}
					});
				}
			},
			toRecord() {
				uni.navigateTo({
					url: '/pages/draw/record'
				})
			}
		}
    }
</script>

<style lang="scss" scoped>
.content {
    padding: 20rpx;
    .coupon-info {
        width: 100%;
        height: 282rpx;
        border-radius: 16rpx;
        background: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		@include flexBox(space-between, flex-start, column);
		.title {
			color: #373737;
			font-size: 30rpx;
		}
		.number {
			color: #3696FF;
			font-size: 36rpx;
			@include flexBox(flex-start, flex-end);
			.text {
				font-size: 68rpx;
				font-weight: 600;
				margin-right: 16rpx;
			}
			.symbol {
				margin-bottom: 12rpx;
			}
		}
		.status {
			font-size: 28rpx;
			color: #787878;
			.text {
				margin-right: 36rpx;
			}
		}
		.record {
			width: 156rpx;
			line-height: 60rpx;
			background: #EEF5FF;
			border-radius: 50rpx 0 0 50rpx;
			position: absolute;
			right: 0;
			top: 38rpx;
			color: #1677FA;
			font-size: 28rpx;
			text-align: center;
		}
    }
	.coupon-change {
		width: 100%;
		height: 504rpx;
		border-radius: 16rpx;
		background: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		margin-top: 20rpx;
		@include flexBox(space-between, flex-start, column);
		.title {
			color: #373737;
			font-size: 30rpx;
		}
		.coupon-list {
			width: 100%;
			@include flexBox(space-between, center);
			.coupon-item {
				width: 200rpx;
				height: 200rpx;
				border-radius: 12rpx;
				border: 3rpx solid #fff;
				box-sizing: border-box;
				box-shadow: 0px 0px 16rpx rgba(175, 196, 226, 0.8);
				transition: 0.5s;
				@include flexBox(center, center, column);
				.text {
					font-size: 28rpx;
				}
				.number {
					margin-bottom: 16rpx;
					font-size: 32rpx;
					@include flexBox(flex-start, flex-end);
					.text {
						font-size: 64rpx;
						margin-right: 6rpx;
					}
					.symbol {
						margin-bottom: 10rpx;
					}
				}
				&.active {
					border: 3rpx solid #1E8AFF;
					color: #1E8AFF;
				}
			}
		}
		.radio-group {
			width: 100%;
			@include flexBox(space-around, center);
			.radio {
				color: #373737;
				font-size: 28rpx;
			}
			.radio-item {
				font-size: 28rpx;
				color: #373737;
				@include flexBox(center, center);
				.radio {
					border: 2rpx solid #1677FA;
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					box-sizing: border-box;
					margin-right: 8rpx;
					@include flexBox(center, center);
					.inner {
						transition: 0.3s;
					}
					&.active {
						.inner {
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #1677FA;
						}
					}
				}
			}
		}
		.change-btn {
			width: 640rpx;
			line-height: 84rpx;
			text-align: center;
			background: #4BA1FE;
			border-radius: 8rpx;
			color: #fff;
			font-size: 28rpx;
			margin: 0 auto;
		}
	}
	.rules {
		margin-top: 22rpx;
		font-size: 28rpx;
		padding: 0 40rpx;
		color: #333333;
		.rule-item {
			margin-bottom: 14rpx;
			line-height: 40rpx;
			@include flexBox(flex-start, flex-start, column);
		}
	}
}
</style>